<template>
  <view class="add">
    <form @submit="onSubmit">
      <view class="item">
        <input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
      </view>

      <view class="item">
        <input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
      </view>

      <view class="item">
        <textarea v-model="formValue.content" maxlength="-1" name="content" placeholder="请输入详细内容"></textarea>
      </view>

      <view class="item">
        <uni-file-picker
         v-model="imageValue"
        fileMediatype="image" 
        mode="grid" 
        ref="imageFiles" 
        title="至多选择9张图片" 
        :auto-upload="false"
        @success="uploadImage" />
      </view>

      <view class="item">
        <uni-file-picker limit="1" v-model="videoValue" fileMediatype="video" mode="grid" ref="videoFile" title="请选择1个视频文件" :auto-upload="false" @success="uploadVideo" />
      </view>

      <view class="item">
        <button form-type="reset">重置</button>
        <button form-type="submit" type="primary" :disabled="isDisabled(formValue)">提交</button>
      </view>

    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageValue: [],
        videoValue: [],
        formValue: {
          title: "",
          author: "",
          content: ""
        },
        picurls: [],
        videourl: []
      };
    },
    methods: {
      //图片上传成功
      uploadImage(e) {
        this.picurls = e.tempFilePaths
      },
      uploadVideo(e) {
        this.videourl = e.tempFilePaths
      },

      //判断按钮是否禁用
      isDisabled(obj) {
        let bool = Object.keys(obj).some((key, value) => {
          return obj[key] == ''
        })
        return bool;
      },
      //点击提交
      async onSubmit(e) {
        await this.$refs.imageFiles.upload()
        await this.$refs.videoFile.upload()
        let detail = e.detail.value
        uniCloud.callFunction({
          name: "art_add",
          data: {
            detail,
            picurls: this.picurls,
            videourl: this.videourl
          }
        }).then(res => {
          console.log(res);
          uni.showToast({
            title: "发布成功"
          })

          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          }, 800)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add {
    padding: 30rpx;
    background-color: #fff;

    .item {
      padding-bottom: 20rpx;

      input,
      textarea {
        border: 1rpx solid #eee;
        height: 80rpx;
        padding: 0 20rpx;
      }

      textarea {
        height: 200rpx;
        width: 100%;
        box-sizing: border-box;
      }

      button {
        margin-bottom: 20rpx;
      }
    }
  }
</style>
